<script setup lang="ts">
import { QuestionType, TemplateUpdateForm } from '@/api/exam/template/types';
import { debounce } from 'lodash-es';
import { ProjectForm } from '@/api/exam/project/types';
import _ from 'lodash';
import { RightOutlined } from '@ant-design/icons-vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { exam_question_type } = toRefs<any>(proxy?.useDict('exam_question_type'));

interface Props {
  projectForm: any | ProjectForm;
}

const props = withDefaults(defineProps<Props>(), {
  projectForm: {
    survey: {
      children: []
    }
  }
});
// 使用深克隆，避免对原始数据进行修改
const projectForm = ref<ProjectForm>(_.cloneDeep(props.projectForm));

// 分页状态
const currentPage = ref(0);

// 计算属性
const totalPages = computed(() => {
  return projectForm.value.survey.children?.length || 0;
});

// 监听题目变化重置页码
watch(() => projectForm.value.survey.children, () => {
  currentPage.value = 0;
});

const submit = async () => {

};
</script>

<template>
  <div class="survey-antd">
    <!-- 分页模式 -->
    <div v-if="projectForm.setting.answerSetting.onePageOneQuestion">
      <a-flex vertical justify="space-between" style="height: calc(100vh - 200px);">
        <!-- 当前题目 -->
        <div
          v-for="(template, index) in [projectForm.survey.children[currentPage]]"
          :key="template.id"
          class="template-item one-page-container"
        >
          <div class="ellipsis-container">
            {{ currentPage + 1 }}. {{ template.title || '未命名题目' }}
          </div>

          <!-- 题目内容渲染逻辑 -->
          <div class="mb-4">
            <el-radio-group v-if="template.type === QuestionType.Radio ||
        template.type === QuestionType.TrueFalse" v-model="template.attribute.examCorrectAnswer">
              <el-row>
                <el-col
                  v-for="(option, idx) in template.children"
                  :key="idx"
                  :span="24 / (template.attribute.columns || 1)"
                >
                  <el-radio :key="index" :value="option.id">
                    {{ option.title }}
                  </el-radio>
                </el-col>
              </el-row>
            </el-radio-group>
            <el-checkbox-group v-if="template.type ===QuestionType.Checkbox"
                               v-model="template.attribute.examCorrectAnswer">
              <el-row>
                <el-col
                  v-for="(option, idx) in template.children"
                  :key="idx"
                  :span="24 / (template.attribute.columns || 1)"
                >
                  <el-checkbox :value="option.id" class="w-full">
                    {{ option.title }}
                  </el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
            <div v-if="template.type === QuestionType.MultipleBlank ||
        template.type === QuestionType.FillBlank">
              <el-row>
                <el-col
                  v-for="(option, idx) in template.children"
                  :key="idx" class="mt-1 mb-1"
                  :span="24 / (template.attribute.columns || 1)"
                >
                  <el-input v-model="option.attribute.examCorrectAnswer" class="w-full" />
                </el-col>
              </el-row>
            </div>
            <div v-if="template.type ===QuestionType.Textarea">
              <el-row>
                <el-col
                  v-for="(option, idx) in template.children"
                  :key="idx" class="mt-1 mb-1"
                  :span="24 / (template.attribute.columns || 1)"
                >
                  <el-input type="textarea" v-model="option.attribute.examCorrectAnswer" class="w-full"
                            :autosize="{ minRows: 2, maxRows: 6 }" resize="none" />
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <!-- 分页控件 -->
        <div class="pagination-control">
          <el-button
            :disabled="currentPage === 0"
            @click="currentPage--" plain type="primary">
            <el-icon>
              <ArrowLeftBold />
            </el-icon>
            上一页
          </el-button>

          <span class="page-info">
        {{ currentPage + 1 }} / {{ totalPages }}
      </span>
          <el-button
            :disabled="currentPage >= totalPages - 1"
            @click="currentPage++" plain type="primary"
          >
            下一页
            <el-icon>
              <ArrowRightBold />
            </el-icon>
          </el-button>
        </div>
      </a-flex>
    </div>
    <div v-else>
      <div v-for="(template, index) in projectForm.survey.children" class="template-item">
        <!-- 题目标题 -->
        <div class="ellipsis-container">
          {{ index + 1 }}. {{ template.title || '未命名题目' }}
        </div>
        <div class="mb-4">
          <el-radio-group v-if="template.type === QuestionType.Radio ||
        template.type === QuestionType.TrueFalse" v-model="template.attribute.examCorrectAnswer">
            <el-row>
              <el-col
                v-for="(option, idx) in template.children"
                :key="idx"
                :span="24 / (template.attribute.columns || 1)"
              >
                <el-radio :key="index" :value="option.id">
                  {{ option.title }}
                </el-radio>
              </el-col>
            </el-row>
          </el-radio-group>
          <el-checkbox-group v-if="template.type ===QuestionType.Checkbox"
                             v-model="template.attribute.examCorrectAnswer">
            <el-row>
              <el-col
                v-for="(option, idx) in template.children"
                :key="idx"
                :span="24 / (template.attribute.columns || 1)"
              >
                <el-checkbox :value="option.id" class="w-full">
                  {{ option.title }}
                </el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
          <div v-if="template.type === QuestionType.MultipleBlank ||
        template.type === QuestionType.FillBlank">
            <el-row>
              <el-col
                v-for="(option, idx) in template.children"
                :key="idx" class="mt-1 mb-1"
                :span="24 / (template.attribute.columns || 1)"
              >
                <el-input v-model="option.attribute.examCorrectAnswer" class="w-full" />
              </el-col>
            </el-row>
          </div>
          <div v-if="template.type ===QuestionType.Textarea">
            <el-row>
              <el-col
                v-for="(option, idx) in template.children"
                :key="idx" class="mt-1 mb-1"
                :span="24 / (template.attribute.columns || 1)"
              >
                <el-input type="textarea" v-model="option.attribute.examCorrectAnswer" class="w-full"
                          :autosize="{ minRows: 2, maxRows: 6 }" resize="none" />
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.survey-antd {
  position: relative;
  max-width: 80%;
  margin: 32px auto;
  white-space: pre;
  border-width: 0px;
  border-radius: 8px;
}

.template-item {
  white-space: normal; /* 允许换行 */
  word-break: break-word; /* 强制单词内换行（长单词/URL） */
  overflow-wrap: break-word; /* 兼容性更好 */
}

.one-page-container {
  overflow-y: auto;
}

.ellipsis-container {
  display: inline-block; /* 确保宽度继承 */
  max-width: 100%; /* 防止溢出父容器 */
  vertical-align: middle; /* 垂直对齐 */
}

.pagination-control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  padding: 15px;
  border-radius: 4px;
}

.page-info {
  font-size: 14px;
  color: #606266;
  min-width: 80px;
  text-align: center;
}
</style>
